<template>
    <div class="outBox">
        <div class="innerBox" >
            <div class="titleBox"><span class="bigText">{{this.functionName}}</span></div>
            <div class="textBox"><span class="smallText">{{ this.ChineseName }}</span></div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        functionName:{type:String},ChineseName:{type:String}
    }
}
</script>
<style scoped>
    .outBox{
        perspective: 100px; cursor: pointer;
    }
    .innerBox{
        transform: rotateY(-15deg) scale(1,1);
        transition-duration: 0.3s;
    }
    .innerBox:hover .textBox{
        background-color: rgb(255, 13, 13);
    }
    .innerBox:hover .titleBox{
       background-color:rgb(83, 81, 81) ;
    }
    .titleBox {
        height: 50px;
        width: 140px;
        background-color: rgb(18, 17, 17);
        text-align: center;
        transform: skewX(5deg);
        border: rgb(132, 2, 2) 5px solid;
        transition-duration: 0.3s;
    }
    .textBox {
        transition-duration: 0.3s;
        height: 20px;
        width: 100px;
        background-color: rgb(188, 36, 36);
        padding: 5px;
        text-align: center;
     

    }
    .bigText{
        color:#fff;
        font-size: 40px;
        position:relative;
        -webkit-text-stroke: 1px black;
        -webkit-text-fill-color :white;
        font-weight:bolder;
        top:-10px;
        left: -20px;
    }
    .smallText{
        -webkit-text-stroke: 1px black;
        -webkit-text-fill-color :white;
        font-weight: bold;
        font-size:20px;
        color:#fff;
        position:relative;


    }
</style>